<template>
  <div class="tag_cloud">
    <div>标签云</div>
    <ul>
      <li v-for="tag in tags" :key="this"
          :style="{backgroundColor:colors[Math.floor(Math.random() * count)]}"
          @click="searchWithTag(tag)"
      >
        {{ tag }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TagCloud",
  data(){
    return {
      tags:["个人博客","JavaScript","Python","廖龙组合","人工智能","Java","全栈开发","区块链","人机接口",
            "PHP","SQL","数据分析","5G","国际前沿","时光机","数据库","游戏开发","物联网","龙廖组合" ],
      colors:["#2C3E50","#FC4349","#6DBCDB","#C8D6B8",
        "#837493","#8091B0","#9FB5CF", "#C5A2BC",
        "#506358","#88A185","#F6F792","#FF974F",
        "#A49A87","#F26101","#304269","#D9E8F5"],
      count:16
    }
  },
  methods:{
    searchWithTag(tag){
      window.sessionStorage.setItem("keyword","")
      window.sessionStorage.setItem("tag",tag)
      this.$emit("searchWithTag")
    }
  }
}
</script>

<style scoped>
/*标签云*/
.tag_cloud{
  clear:both;
}
.tag_cloud div{
  font-size:24px;
  line-height: 40px;
  border-bottom: 1px solid #C4C1C1;
}
.tag_cloud ul{
  margin:0;
  padding:0;
  list-style-type: none;
}


.tag_cloud ul li{
  float: left;
  height:30px;
  line-height: 30px;
  padding-left:8px;
  padding-right:8px;
  max-width: 120px;
  margin-right:6px;
  border-radius:6px;
  margin-top:9px;
  font-size:16px;
  color:white;
  background-color: #6DBCDB;
}
.tag_cloud ul li:hover{
  border-radius:0;
  color: black;
  cursor: pointer;
}
</style>
